<template>
<div>
  <el-card style="height: 60px">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline" style="margin-top: -10px; margin-left: 10px" ref="ruleForm">
      <el-form-item label="关键字查询" prop="rentalAccount">
        <el-input v-model="searchForm.searchForm" placeholder="请输入关键字查询"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
        <el-button type="danger" @click="resetForm('ruleForm')" icon="el-icon-refresh">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin-top: 10px">
    <el-form style="margin-bottom: -20px; margin-top: -15px; margin-left: 10px">
      <el-form-item style="margin-bottom: 10px">
        <el-button type="success" @click="dialogVisible = true; title = '新增'; resetFormData()" size="small" style="height: 30px; width: 70px; margin-top: 10px" icon="el-icon-plus">新增</el-button>
        <el-button type="danger" @click="handleDelete" size="small" style="height: 30px; width: 70px;margin-left: 10px" icon="el-icon-delete">删除</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin-top: 10px">
    <el-table
      @selection-change="handleSelectionChange"
      :data="tableData"
      v-loading="loading"
      element-loading-text="拼命加载中"

      style="width: 100%">
      <el-table-column
        type="selection"
        width="55"
      >
      </el-table-column>
      <el-table-column label="序号" prop="id"></el-table-column>
      <el-table-column label="封面" prop="img">
        <template v-slot="scope">
          <!-- 当有封面地址时进行图片回显预览 -->
          <el-image
            :src="imgUrl + scope.row.img"
            style="width: 60px; height: 40px; border-radius: 10px"
            :preview-src-list="[imgUrl + scope.row.img]"
          />
        </template>
      </el-table-column>
      <el-table-column label="课程名称" prop="name"></el-table-column>
      <el-table-column label="课程介绍" prop="content"></el-table-column>
      <el-table-column label="课程类型" prop="type"></el-table-column>
      <el-table-column label="课程视频" prop="video">
        <template v-slot="scope">
          <el-button
            v-if="scope.row.video"
            size="mini"
            type="primary"
            @click="playVideo(scope.row.video)"
          >
            播放视频
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="发布时间" prop="time"></el-table-column>
      <el-table-column label="用户id" prop="yonghuid"></el-table-column>
      <el-table-column label="用户名字" prop="yonghuname"></el-table-column>
      <el-table-column label="操作" width="160" style="margin-right: 30px"> <!-- 设置固定宽度确保足够空间 -->
        <template #default="{ row }">
          <div style="display: flex; align-items: center; justify-content: space-between; width: 100%">
            <el-button
              size="mini"
              @click="handleEdit(row)"
              style="margin-right: 10px"> <!-- 使用margin-right替代margin-left -->
              编辑
            </el-button>
            <el-button
              v-if="row.parentTypeId!== 0"
              size="mini"
              type="danger"
              style="margin-right: 70px"
              @click="handleDelete(row)">
              删除
            </el-button>
          </div>
        </template>
        <template #empty>
          <el-empty description="暂无数据"></el-empty>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; align-items: center; margin-top: 30px; margin-left: 400px;">
      <el-pagination background @size-change="handleSizeChange" :page-sizes="[3, 6, 9]"
                     @current-change="handleCurrentChange" :current-page="searchForm.pageNum" :page-size="searchForm.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
      <el-button style="margin-left: 10px" size="small" type="primary" plain @click="toPage">跳转</el-button>
    </div>
  </el-card>
  <!-- 新增 / 编辑弹窗 -->
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="40%"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <el-form
      :model="editForm"
      label-width="100px"
      style="padding-right: 50px"
      :rules="rules"
      ref="formRef"
    >
      <!-- 课程封面 - 图片上传 -->
      <el-form-item label="课程封面" prop="img">
        <el-upload
          :action="'http://localhost:9999/upload'"
          class="avatar-uploader"
          :headers="{ token: user.token }"
          list-type="picture"
          :on-success="handleImgSuccess"
          accept="image/*"
        >
          <el-button type="primary">上传图片</el-button>
        </el-upload>
        <!-- 回显已上传的图片 -->
        <el-image
          v-if="editForm.img"
          :src="imgUrl + editForm.img"
          style="width: 60px; height: 40px; border-radius: 10px; margin-top: 5px;"
          :preview-src-list="[imgUrl + editForm.img]"
        />
      </el-form-item>

      <!-- 课程名称 -->
      <el-form-item label="课程名称" prop="name">
        <el-input v-model="editForm.name" placeholder="课程名称"></el-input>
      </el-form-item>

      <!-- 课程介绍 -->
      <el-form-item label="课程介绍" prop="content">
        <el-input v-model="editForm.content" placeholder="课程介绍"></el-input>
      </el-form-item>

      <!-- 课程类型 -->
      <el-form-item label="课程类型" prop="type">
        <el-input v-model="editForm.type" placeholder="课程类型"></el-input>
      </el-form-item>

      <!-- 课程视频 - 上传组件 -->
      <el-form-item label="课程视频" prop="video">
        <el-upload
          class="video-uploader"
          :action="'http://localhost:9999/upload'"
          :on-success="handleVideoSuccess"
          accept="video/*"
          :limit="1"
          list-type="text"
        >
          <el-button type="primary">点击上传视频</el-button>
        </el-upload>
        <!-- 回显已上传的视频 -->
        <div v-if="editForm.video" style="margin-top: 5px;">
          已上传视频，点击播放：
          <el-button
            type="primary"
            size="mini"
            @click="playVideo(editForm.video)"
            style="width: 100%; height: auto; max-height: 70vh; object-fit: contain;"
          >
            播放视频
          </el-button>
        </div>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
    </div>
  </el-dialog>
  <el-dialog
    :visible.sync="videoVisible"
    width="60%"
    :close-on-click-modal="false"
    @close="handleVideoClose"
    append-to-body
  >
    <div style="width: 100%; max-height: 70vh; overflow: hidden; display: flex; justify-content: center;">
      <video
        v-if="currentVideoUrl"
        :src="currentVideoUrl"
        controls
        autoplay
        style="max-width: 100%; max-height: 100%; object-fit: contain;"
      ></video>
    </div>
  </el-dialog>
</div>
</template>

<script>
import { findRentalAccount ,handleDelete, submitForm, updateForm } from '@/api/md/AntiFraud.js'
export default {
  name: 'AntiFraud',
  data() {
    return {
      searchForm: {
        pageNum: 1,
        pageSize: 3,
        rentalAccount: '',
        id: '',
        img: '',
        content: '',
        type: '',
        video: '',
        time: '',
        yonghuid: '',
        yonghuname: '',
        name: '',

      },
      title: '新增',
      videoVisible: false,  // 是否显示播放视频的弹窗
      currentVideoUrl: null, // 当前要播放的视频地址
      rules: {},
      imgUrl: 'https://wanghao1234.oss-cn-hangzhou.aliyuncs.com/g8hms/',
      editForm: {
        id: '',
        img: '',
        content: '',
        type: '',
        video: '',
        name: '',
      },
      dialogVisible: false,
      tableData: [],
      loading: false,
      total: 0,
      pageSize: 3,
      pageNum: 1,
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      selected: []
    }
  },
  methods: {
    findAll() {
      this.loading = true;
      findRentalAccount(this.searchForm).then(res => {
        console.log(res)
        this.tableData = res.data.list;
        console.log(this.tableData)
        this.total = res.data.total;
        this.$message({
          type: 'success',
          message: '查询成功!'
        });
        this.pageSize = 3;
        this.pageNum = 1;
      }).catch(err => {
        this.$message({
          message: '查询失败',
          type: 'error'
        });
      })
    .finally(() => {
        this.loading = false;
      });
    },
    onSubmit() {
      this.searchForm.pageNum = 1;
      this.searchForm.pageSize = 3;
      this.findAll();
    },
    //图片上传成功回调
    handleImgSuccess(res) {
      // 根据你的实际后端响应结构调整
      if (res.code === 20000 ) {
        this.editForm.img = res.data
        this.$message.success('图片上传成功')
      } else {
        this.$message.error(res.msg || '图片上传失败')
      }
    },
    //视频上传成功回调
    handleVideoSuccess(res) {
      // 根据你的实际后端响应结构调整
      if (res.code === 20000 ) {
        this.editForm.video = res.data
        this.$message.success('视频上传成功')
      } else {
        this.$message.error(res.msg || '视频上传失败')
      }
    },
    //点击播放视频
    playVideo(url) {
      this.videoVisible = true;
      this.currentVideoUrl = url;
    },
    //点击关闭播放视频弹窗
    handleVideoClose() {
      this.videoVisible = false;
      this.currentVideoUrl = null;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.searchForm = null;
      this.searchForm.pageNum = 1;
      this.searchForm.pageSize = 3;
      this.findAll();
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        handleDelete(row.id).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.findAll();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    })
    },
    resetFormData() {},
    handleEdit(row) {
      this.dialogVisible = true;
      this.title = '编辑';
      this.resetFormData();
      this.editForm = { ...row };
    },
    handleSelectionChange() {
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.searchForm.pageNum = 1;
      this.findAll();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val
      this.findAll();
    },
    toPage() {
      this.findAll();
    },
    submitForm(formName) {
      //如果是新增，则执行新增逻辑，否则执行编辑逻辑
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title === "新增") {
            submitForm(this.editForm).then(ret => {
              this.$message({
                type: 'success',
                message: '添加成功!',
              });
              this.searchForm.pageNum = 1
              this.$refs[formName].resetFields()
              this.dialogVisible = false;
              this.findAll();
            });
          } else {
            // 修改此处，调用正确的方法
            updateForm(this.editForm).then(ret => {
              this.$message({
                type: 'success',
                message: '修改成功!',
              });
              this.dialogVisible = false;
              this.$refs[formName].resetFields()
              this.findAll();
            });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
  created() {
    this.findAll();
  },
}
</script>

<style scoped lang="scss">

</style>
